<template>
  <el-carousel trigger="click" height="520px">
    <el-carousel-item v-for="item in 4" :key="item">
      <img :src="require(`@/assets/background_${item}.jpg`)" alt="background_${item}.jpg">
    </el-carousel-item>
  </el-carousel>

  <div class="menu">
    <div class="menu-child" @click="goRegistration">
      <svg class="logo" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" style="grid-row: span 2;">
        <path d="M142.4 21.9c5.6 16.8-3.5 34.9-20.2 40.5L96 71.1V192c0 53 43 96 96 96s96-43 96-96V71.1l-26.1-8.7c-16.8-5.6-25.8-23.7-20.2-40.5s23.7-25.8 40.5-20.2l26.1 8.7C334.4 19.1 352 43.5 352 71.1V192c0 77.2-54.6 141.6-127.3 156.7C231 404.6 278.4 448 336 448c61.9 0 112-50.1 112-112V265.3c-28.3-12.3-48-40.5-48-73.3c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V336c0 97.2-78.8 176-176 176c-92.9 0-168.9-71.9-175.5-163.1C87.2 334.2 32 269.6 32 192V71.1c0-27.5 17.6-52 43.8-60.7l26.1-8.7c16.8-5.6 34.9 3.5 40.5 20.2zM480 224a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/>
      </svg>
      <div class="content-right">
        <span class="content-right-up">我要挂号</span>
        <span class="content-right-down">在线查看医资力量，预约挂号</span>
      </div>
    </div>
    <div class="menu-child" @click="goMyRegistration">
      <svg class="logo" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" style="grid-row: span 2;">
        <path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c.2 35.5-28.5 64.3-64 64.3H128.1c-35.3 0-64-28.7-64-64V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L416 100.7V64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32V185l52.8 46.4c8 7 12 15 11 24zM272 192c-8.8 0-16 7.2-16 16v48H208c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h48v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V320h48c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H320V208c0-8.8-7.2-16-16-16H272z"/>
      </svg>
      <div class="content-right">
        <span class="content-right-up">查看挂号单</span>
        <span class="content-right-down">在线查看您的挂号详情</span>
      </div>
    </div>
    <div class="menu-child" @click="goMedicalRecord">
      <svg class="logo" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" style="grid-row: span 2;">
        <path d="M48 0C21.5 0 0 21.5 0 48V256H144c8.8 0 16 7.2 16 16s-7.2 16-16 16H0v64H144c8.8 0 16 7.2 16 16s-7.2 16-16 16H0v80c0 26.5 21.5 48 48 48H265.9c-6.3-10.2-9.9-22.2-9.9-35.1c0-46.9 25.8-87.8 64-109.2V271.8 48c0-26.5-21.5-48-48-48H48zM152 64h16c8.8 0 16 7.2 16 16v24h24c8.8 0 16 7.2 16 16v16c0 8.8-7.2 16-16 16H184v24c0 8.8-7.2 16-16 16H152c-8.8 0-16-7.2-16-16V152H112c-8.8 0-16-7.2-16-16V120c0-8.8 7.2-16 16-16h24V80c0-8.8 7.2-16 16-16zM512 272a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM288 477.1c0 19.3 15.6 34.9 34.9 34.9H541.1c19.3 0 34.9-15.6 34.9-34.9c0-51.4-41.7-93.1-93.1-93.1H381.1c-51.4 0-93.1 41.7-93.1 93.1z"/>
        </svg>
      <div class="content-right">
        <span class="content-right-up">管理就诊档案</span>
        <span class="content-right-down">管理您的就诊档案</span>
      </div>
    </div>
  </div>

</template>

<script>

import Global_color from "@/app/Global_color.vue";

export default {
  name: "Header",

  props: {
    msg: String,
  },

  data(){
    return {
      grey: Global_color.model_color,
      green: Global_color.main_color,
      font_grey: Global_color.font_grey,
    }
  },

  methods:{
    goRegistration: function () {
      this.$router.push('/Patient/Department')
    },

    goMyRegistration: function () {
      if (sessionStorage.getItem("user") === "null") {
        this.$router.push("/Login")
      } else {
        this.$router.push('/Patient/MyRegistration')
      }
    },

    goMedicalRecord: function () {
      if (sessionStorage.getItem("user") === "null") {
        this.$router.push("/Login")
      } else {
        this.$router.push('/Patient/MedicalRecords')
      }
    },
  },

  created() {

  }

}

</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img {
  max-width: 100%;
}
.menu {
  display: flex;
  justify-content: space-evenly;
  margin: 120px 12% 120px 12%;
}
.menu-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 120px;
  border-radius: 18px;
  color: v-bind(green);
  font-size:18px;
  padding: 0 12px 0 12px;
  background-color: v-bind(grey);
  transition: all 0.45s;
}
.menu-child:hover {
  background-image: url("@/assets/background.jpg");
  box-shadow: 1px 1px 20px v-bind(green);
  border-radius: 20px;
  color: #F2F2F2;
  transform: scale(1.04);
}
.logo {
  font-size: 40px;
  display: flex;
  flex-direction: row-reverse;
  fill: v-bind(green);
}
.menu-child:hover .logo {
  fill: #FFFFFF;
}
.content-right {
  display: grid;
  grid-template-columns: auto 1fr;
  padding-left: 8px;
}
.content-right-up {
  grid-row: 1;
  grid-column: 2;
}
.content-right-down {
  grid-row: 2;
  grid-column: 2;
  font-size: 8px;
  color: v-bind(font_grey)
}
.menu-child:hover .content-right-down {
  color: #c0c0c0;
}
</style>
